<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> DataTables Demo </title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
    <script src="../../../adminlte/bower_components/jquery/jquery.min.js"></script>

     <link rel="stylesheet" href="../../../adminlte/bower_components/font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="../../../adminlte/bower_components/Ionicons/css/ionicons.min.css">

     <link rel="stylesheet" href="../../../adminlte/bower_components/bootstrap/css/bootstrap.min.css">
     <link rel="stylesheet" href="../../../adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">

     <script src="../../../adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>

  <script src="../../../plugins/treeGrid/dataTables.treeGrid.js"></script>
 </head>

 <body>
 <!-- DEMO样例仅供大家参考；
      注意要在WEB容器运行 如：IIS、Nginx、Tomcat等 否则AJAX会以 file:// 请求出现错误；
 -->
 <table class="table table-striped table-bordered table-hover" id="treetable">
	<thead>
		<tr>
			<th></th>
			<th>部门名称</th>
			<th>英文名称</th>
			<th>负责人</th>
			<th>部门电话</th>
			<th>部门地址</th>
			<th>主要职能</th>
		</tr>
	</thead>
	<tbody></tbody>
  </table>

  <script type="text/javascript">
    var dataTable;
    var tree;
   $(function () {
        dataTable = $('#treetable').DataTable({
            /**
             l - Length changing 改变每页显示多少条数据的控件
             f - Filtering input 即时搜索框控件
             t - The Table 表格本身
             i - Information 表格相关信息控件
             p - Pagination 分页控件
             r - pRocessing 加载等待显示信息
             **/
            "dom": "tr",
            "ordering": false, //禁用排序
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "./data.json",
                // "async": false
            },
            "columns": [
                {
                    className: 'treegrid-control',
                    data: function (item) {
                        if (item.children != null && item.children.length > 0) {
                            return '<span> ++ </span>';
                        }
                        return '';
                    }
                },
                {"data": "name"},
                {"data": "nameEn"},
                {"data": "headMan"},
                {"data": "tel"},
                {"data": "address"},
                {"data": "functions"}
            ],
            "columnDefs": [
                {
                    "defaultContent": "",
                    "targets": "_all"
                }
            ]
        });
       // collapseAll();
       tree = new $.fn.dataTable.TreeGrid(dataTable,{
           left: 15,
           expandAll: true,
           expandIcon: '<span>++</span>',
           collapseIcon: '<span>--</span>'
       });
       //tree.expandAll();
    });


function expandAll(){
    tree.expandAll();
}

function collapseAll(){
    tree.collapseAll();
}

function reload(){
	dataTable.ajax.reload();
}

function draw(){
	dataTable.draw(false);
}
</script>

<div>
<button class="btn btn-primary" type="button" onclick="expandAll()">expandAll()</button>
<button class="btn btn-primary" type="button" onclick="collapseAll()">collapseAll()</button>
<button class="btn btn-primary" type="button" onclick="reload()">reload()</button>
<button class="btn btn-primary" type="button" onclick="draw()">draw()</button>
</div>

 </body>
</html>
